<!DOCTYPE html>
<html>
<p id="text">切换标签或切换应用程序窗口以进行测试</p>
<head>
    <title>Log Feedback</title>
    <style>
        #log-container {
            width: 100%;
			height: 100%;
            //height: 200px;
            overflow-y: scroll;
            border: 1px solid #ccc;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div id="log-container"></div>

    <script>
        document.addEventListener('visibilitychange', () => {
            const state = document.visibilityState;
            console.log(state); // hidden 表示当前页面切换为隐藏状态，visible表示当前页面切换为浏览状态
            // 将日志信息输出到网页上的指定元素中
            if (state === 'hidden') {
                const logContainer = document.getElementById('log-container');
                logContainer.innerHTML += '离开本页面 Visibility change:hidden<br>';
            } else {
                const logContainer = document.getElementById('log-container');
                logContainer.innerHTML += '切换回本页面 Visibility change:visible<br>';
            }
        });

        window.addEventListener('focus', (e) => {
            console.log('focus');
            // 将日志信息输出到网页上的指定元素中
            const logContainer = document.getElementById('log-container');
            logContainer.innerHTML += '焦点在页面窗口 Window gained focus<br>';
        });

        window.addEventListener('blur', (e) => {
            console.log('blur');
            // 将日志信息输出到网页上的指定元素中
            const logContainer = document.getElementById('log-container');
            logContainer.innerHTML += '页面窗口失去焦点 Window lost focus<br>';
        });
    </script>
</body>
</html>
